<template>
  <div class="artile-item">
    <!--    <div class="one-part">-->
    <!--      &lt;!&ndash;    置顶 &ndash;&gt;-->
    <!--      <div class="is-top" v-if="articles.isTop==0" v-for="(item,index) in articles.children" :key="index">-->
    <!--        <div>{{ item.title }}</div>-->
    <!--        <div><span>置顶</span>{{ item.name }}{{ item.commentNum }}评</div>-->
    <!--      </div>-->
    <!--      &lt;!&ndash;      视频&ndash;&gt;-->
    <!--      <div class="swiper" v-if="articles.commentType==2 && articles.children">-->
    <!--        <div class="swiper-item" v-for="(item,index) in articles.children" :key="index"-->
    <!--             :style="{backgroundImage: `url(http://debug.yasee.com.cn${item.thumbnail})`}"-->
    <!--             @click="gotoVideo(item)">-->
    <!--          <div class="play-desc">-->
    <!--            <img src="@/assets/play.png"/>-->
    <!--            <div>{{ articles.visitNum || 0 }} 次播放</div>-->
    <!--          </div>-->
    <!--        </div>-->
    <!--        <div class="click-more" @click="gotoMoreVideo()">点击查看更多</div>-->
    <!--      </div>-->
    <!--    </div>-->
    <!--    //动态列表-->
    <div class="two-part-main" v-if="articles.commentType==1">
      <div class="two-part-title">
        <div><span class="time-l">{{ articles.convertTime.substring(0, 2) }}</span><span
            class="time-r">{{ articles.convertTime.substring(2, 12) }}</span>
        </div>
      </div>
      <div class="title" @click="handleTrends(articles)">{{ articles.title }}</div>
      <div class="desc" @click="handleTrends(articles)">{{ articles.description }}</div>
      <div class="image-list">
        <div class="item-list-item" v-for="(item,index) in articles.children.slice(0,3)" :key="index"
             :style="{backgroundImage: `url(${item})`}"
             @click="handleImageClick(articles,index)">
          <div v-if="articles.children.length > 3 && index=== 2" class="more">
            +{{ articles.children.length > 3 ? articles.children.length - 3 : '' }}
          </div>
        </div>
      </div>
    </div>
    <div class="two-part-main" v-if="articles.commentType==2">
      <div class="two-part-title">
        <div><span class="time-l">{{ articles.convertTime.substring(0, 2) }}</span><span
            class="time-r">{{ articles.convertTime.substring(2, 12) }}</span>
        </div>
      </div>
      <div class="title" @click="handleTrends(articles)">{{ articles.title }}</div>
      <div class="desc" @click="handleTrends(articles)">{{ articles.description }}</div>
      <div class="image-list">
        <div class="item-list-item"
             :style="{backgroundImage: `url(${store.state.imgUrl}${articles.thumbnail})`}"
             @click="handleImageClick(articles)">
        </div>
      </div>
    </div>
    <!--    文章类-->
    <div class="three-part-main" v-if="articles.commentType==0">
      <!--      <div class="three-part-title">-->
      <!--        <img :src="getImageUrl(articles.avatar)">-->
      <!--        <div class="info">-->
      <!--          <div class="info-top">{{ articles.name }}</div>-->
      <!--          <div class="info-bottom"><span>{{ articles.convertTime }}</span></div>-->
      <!--        </div>-->
      <!--        <div class="gzbtn" @click="gotoGz(articles)" v-if="attention==true">-->
      <!--          已关注-->
      <!--        </div>-->
      <!--        <div class="gzbtn" style="background: rgba(242, 150, 0, 1);color:#ffffff" :class="{nogz:visible}"-->
      <!--             @click="gotoGz(articles)" v-if="attention==false">-->
      <!--          未关注-->
      <!--        </div>-->
      <!--      </div>-->
      <div class="three-artile">
<!--        <img v-if="articles.thumbnail" :src="store.state.imgUrl + articles.thumbnail" alt=""-->
<!--             class="three-artile-right">-->
        <div v-if="articles.thumbnail" :style="{ backgroundImage: `url(${store.state.imgUrl +articles.thumbnail})`}" class="three-artile-right"></div>
        <div class="three-artile-left" style="margin-left: 10px;">
          <div class="desc">{{ articles.title }}</div>
          <div @click="handleArticle(articles.id)" class="left-t">{{ articles.description }}</div>
        </div>
      </div>
      <div class="three-artile-bottom">
        <div>{{ articles.name }}</div>
        <div>{{ articles.convertTime }}</div>
        <!--            <img src="@/assets/remark/jb.png" @click="gotojb(articles)">-->
      </div>
    </div>
    <!--    商品收藏-->
    <div class="four-part-main" v-if="articles.commentType==5">
      <div class="three-artile">
<!--        <img v-if="articles.picture" :src="store.state.imgUrl + articles.picture" alt=""-->
<!--             class="three-artile-right">-->
        <div v-if="articles.picture" class="three-artile-right" :style="{ backgroundImage: `url(${store.state.imgUrl +articles.picture}` }"></div>
        <div class="three-artile-left" style="margin-left: 10px;">
          <div class="desc" style="font-size: 16px;
font-weight: 500;">{{ articles.name }}
          </div>
          <div @click="handleGoods(articles)" class="left-t">
            <div style="font-size: 16px;color: rgba(255, 0, 0, 1);font-weight: 500;">￥<span
                style="font-size: 28px;">{{ articles.price }}</span></div>
            <div style="font-size: 14px;
font-weight: 400;">{{ articles.convertTime }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <van-share-sheet
        v-model="showShare"
        title="立即分享给好友"
        :options="options"
        @select="onSelect"
    />
  </div>

</template>

<script>
import {ImagePreview} from 'vant'
import {Toast} from "vant";
import store from '@/store'
// import Report from "./report";
import {updateLikes, addCollect, addAuthorLike} from "../../../api/share";

export default {
  name: "articleList",
  // components: {Report},
  props: {
    articles: {
      type: Object,
      required: true // 必选
    },
  },
  mounted() {
    console.log('获取收藏的商品：',this.articles)
  },
  data() {
    return {
      options: [
        {name: '微信', icon: 'wechat', openType: 'share'},
        {name: 'QQ', icon: 'qq', openType: 'share'},
        {name: '微博', icon: 'weibo'},
        {name: '复制链接', icon: 'link'},
      ],
      attention: false,
      showShare: false,
      collect: false,
      Like: false,
      store: store,
      contentList: [],
      visible: false,
      // threeUrl: require('@/assets/threeImage.png'),
      remarkList: {
        urlsclove: require('@/assets/remark/sc_love.png'),
        urldzlove: require('@/assets/remark/dz_love.png'),
        urldz: require('@/assets/remark/dz.png'),
        urlpl: require('@/assets/remark/pl.png'),
        urlsc: require('@/assets/remark/sc.png'),
        urlzf: require('@/assets/remark/zf.png'),
      },
      jbvisible: false,
      type: ''
    }
  },
  watch: {
    'articles.isAttention': {
      handler(newChats, oldChats) {
        if (newChats == 1) {
          this.attention = true
        } else {
          this.attention = false
        }
        this.$forceUpdate()
      },
      deep: true
    },
    'articles.isLike': {
      handler(newChats, oldChats) {
        if (newChats == 1) {
          this.Like = true
        } else {
          this.Like = false
        }
        this.$forceUpdate()
      },
      deep: true
    },
    'articles.isCollect': {
      handler(newVal, oldVal) {
        if (newVal == 0) {
          this.collect = true
        } else {
          this.collect = false
        }
        this.$forceUpdate()
      },
      deep: true
    },
  },
  methods: {
    getInfoFromFlutter(info) {
      let data = JSON.parse(info)
      if (data.action.param.succeed == 1) {
        this.$toast.success('分享成功')
      } else {
        this.$toast.success('分享失败')
      }
    },
    onSelect(option) {
      Toast(option.name);
      if (option.name === '微信') {
        window.location.href = 'weixin://';
      } else if (option.name === 'qq') {
        //跳转qq链接
      } else if (option.name === '微博') {
        //跳转微博的链接
      } else if (option.name === '复制链接') {
        //复制链接
        this.copyLink()
      }
      this.showShare = false;
    },
    copyLink() {
      const link = window.location.href; // 要复制的链接
      // console.log(link)
      // 使用Vant的Clipboard组件的copy方法复制链接
      // this.$vant.Clipboard.copy(link)
      //   .then(() => {
      //     this.$toast('链接已复制'); // 复制成功提示
      //   })
      //   .catch(() => {
      //     this.$toast('复制失败'); // 复制失败提示
      //   });
      let inputNode = document.createElement('input')  // 创建input
      inputNode.value = link // 赋值给 input 值
      document.body.appendChild(inputNode) // 插入进去
      inputNode.select() // 选择对象
      document.execCommand('Copy') // 原生调用执行浏览器复制命令
      inputNode.className = 'oInput'
      inputNode.style.display = 'none' // 隐藏
      this.$toast.success('复制成功')
    },
    gotozf(item) {
      // console.log(item)
      this.showShare = true
      //去分享链接跳转
      // let message = {
      //   action: 'share',
      //   param: {
      //     type: "link",            //必填
      //     title: item.title,          //必填
      //     name: '/home/share/index',
      //     subtitle: item.description,
      //     link: "连接地址",//动态列表的详情?id:''
      //     callback: 1
      //   }
      // }
      // getInfoFromVue.postMessage(JSON.stringify(message))
    },
    async gotoGz(item) {
      await this.getGz(item.id);
      this.attention = !this.attention
      // 点赞弹窗
      this.attention == true ?
          this.$toast.success('关注成功！')
          : this.$toast.fail('取关成功！')
    },
    getCollect(item) {
      let data = {
        id: item,
      }
      addCollect(data).then((res) => {
        if (res.code == 0) {
          console.log('收藏成功')
        }
      })
    },
    gotoRemark(id) {//评论
      this.$router.push({
        path: "/trendsDetail", query: {
          id: id,
        }
      });
      // let message = {
      //   action: 'pushPage',
      //   param: {
      //     param: {
      //       type: 'web',
      //       name: '/home/share/trendsDetail',
      //       url: `${this.$store.state.linkUrl}/trendsDetail?commentType=1&token=${this.$store.state.token}`
      //     }
      //   }
      // }
      // getInfoFromVue.postMessage(JSON.stringify(message))
    },
    async gotoCollection(item) {
      await this.getCollect(item.id);
      this.collect = !this.collect
      if (this.collect == true) {
        this.articles.collectNum += 1
      } else {
        this.articles.collectNum -= 1
      }
      // 点赞弹窗
      this.collect == true ?
          this.$toast.success('收藏成功！')
          : this.$toast.fail('取消收藏！')
    },
    async gotodz(item) {
      await this.getLike(item.id);
      this.Like = !this.Like
      if (this.Like == true) {
        this.articles.likeNum += 1
      } else {
        this.articles.likeNum -= 1
      }
      // 点赞弹窗
      this.Like == true ?
          this.$toast.success('点赞成功！')
          : this.$toast.fail('取消点赞！')
    },
    getGz(gzId) {
      let data = {
        id: gzId,
        type: 0,
      }
      addAuthorLike(data).then((res) => {
        if (res.code == 0) {
          console.log('关注成功')
        }
      })
    },
    getLike(likingId) {
      let data = {
        id: likingId,
        type: 0,//文章，动态，视频是0 评论是1
      }
      updateLikes(data).then((res) => {
        if (res.code == 0) {
          console.log('点赞成功')
        }
      })
    },
    close() {
      this.jbvisible = false
    },
    getImageUrl(img) {
      return `${store.state.imgUrl}` + img
    },
    gotogz() {
      this.visible = !this.visible
    },
    gotoMoreVideo() {
      this.$router.push({path: '/page'}) //点击查看更多
      // let message = {
      //   action: 'pushPage',
      //   param: {
      //     type: 'web',
      //     name: '/home/share/page',
      //     url: `${this.$store.state.linkUrl}/page?token=${this.$store.state.token}`
      //   }
      // }
      // getInfoFromVue.postMessage(JSON.stringify(message))
    },
    gotoVideo(item) {
      this.$router.push({path: '/page', query: {id: item.id}})
      // let message = {
      //   action: 'pushPage',
      //   param: {
      //     type: 'web',
      //     name: '/home/share/page',
      //     url: `${this.$store.state.linkUrl}/page?token=${this.$store.state.token}&id=${item.id}`
      //   }
      // }
      // getInfoFromVue.postMessage(JSON.stringify(message))
    },
    gotojb(item) {
      this.type = 'content'
      this.$refs.report.init(item)
      this.jbvisible = !this.jbvisible
    },
    handleArticle(id) {//文章详情
      this.$router.push(
          {
            path: '/articleDetail',
            query: {
              id: id
            }
          }
      )
      // let message = {
      //   action: 'pushPage',
      //   param: {
      //     type: 'web',
      //     name: '/home/share/articleDetail',
      //     url: `${this.$store.state.linkUrl}/articleDetail?id=${id}&token=${this.$store.state.token}`
      //   }
      // }
      // getInfoFromVue.postMessage(JSON.stringify(message))
    },
    handleTrends(item) {//动态列表
      // console.log(item)
      if (item.mediaContent) {
        this.$router.push({path: '/page', query: {id: item.id}})
      } else {
        this.$router.push({
          path: "/trendsDetail", query: {
            id: item.id

          }
        });
      }

      // let message = {
      //   action: 'pushPage',
      //   param: {
      //     type: 'web',
      //     name: '/home/share/trends',
      //     url: `${this.$store.state.linkUrl}/trends?id=${id}&token=${this.$store.state.token}`
      //   }
      // }
      // getInfoFromVue.postMessage(JSON.stringify(message))
    },
    handleImageClick(item, index) {
      if (item.commentType == 1) {
        const imageUrls = item.children.map(image => `${image}`);
        console.log('imageAll', imageUrls)
        ImagePreview({
          images: imageUrls,
          startPosition: index,
          showIndicators: true,
          closeable: true
        });
      }

    },
    handleGoods(item){
      this.$store.state.isShopping = 2
      this.$store.dispatch('shopping/setDetailId', item.id)
      this.$store.dispatch('shopping/setSkuId', item.skuId)
      this.$router.push({
        path: "/detail", query: {}
      });
      let message = {
        action: 'hiddenBottom',
        param: {}
      }
      getInfoFromVue.postMessage(JSON.stringify(message))
    }
  }
}
</script>

<style scoped lang="less">
.artile-item {

  .tab-btn {
    display: flex;
    border-bottom: 1px solid #f0f0f0;
    padding: 10px 10px 0px 10px;
    position: sticky;
    top: 63px;
    z-index: 999;
    background-color: #ffffff;

    img {
      width: 25px;
      height: 25px;
    }

    .btn {
      width: 100px;
      display: flex;
      flex-flow: column;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      font-weight: 500;
      padding-bottom: 8px;
      color: rgba(0, 0, 0, 0.65);
      position: relative;

      .text {
        height: 31px;
        line-height: 31px;
      }

      .circle {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        position: absolute;
        right: 3px;
        top: 5px;
        background-color: red;
      }

      .dhx {
        position: absolute;
        bottom: 0;
        width: 25px;
        height: 2px;
        background-color: rgba(242, 150, 0, 1);
        border-radius: 2px;
      }
    }

    .picture {
      height: 31px;
      line-height: 31px;
      display: flex;
      align-items: center;
      justify-content: center;

    }

    .active {
      color: rgba(242, 150, 0, 1);
      //border-bottom: 2px solid rgba(242, 150, 0, 1);
    }


  }

  .one-part {
    padding: 10px;

    .is-top {
      div:nth-child(1) {
        font-size: 17px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 24.62px;
        color: rgba(0, 0, 0, 1);
        text-align: left;
        vertical-align: top;
      }

      div:nth-child(2) {
        font-size: 12px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 17.38px;

        > span {
          color: rgba(255, 0, 0, 1);
          margin-right: 2px;
        }
      }
    }

    ::-webkit-scrollbar {
      display: none;
    }

    .swiper {
      padding: 17px 0px;
      border-bottom: 1px solid #f0f0f0;
      display: flex;
      align-items: center;
      width: 100%;
      overflow-x: scroll;

      .swiper-item {
        flex-shrink: 0;
        line-height: 231px;
        width: 163.56px;
        height: 231px;
        opacity: 1;
        border-radius: 11px;
        background-size: 100% 100%;
        margin-right: 7.5px;
        position: relative;

        .play-desc {
          display: flex;
          align-items: center;
          justify-content: center;
          position: absolute;
          bottom: 5px;
          left: 5px;
          font-size: 12px;
          font-weight: 400;
          letter-spacing: 0.5px;
          line-height: 17.38px;
          color: rgba(255, 255, 255, 1);

          img {
            margin-right: 3px;
            width: 11.48px;
            height: 13.59px;
          }
        }
      }

      .swiper-item1 {
        flex-shrink: 0;
        margin-right: 7.5px;
        line-height: 231px;
        width: 163.56px;
        height: 231px;
        opacity: 1;
        border-radius: 11px;
        background: url("../../../assets/loadingImage.png") no-repeat center center;
        background-size: 100% 100%;
      }

      .click-more {
        padding: 0 5px;
        font-size: 12px;
        font-weight: 400;
        letter-spacing: 5px;
        line-height: 17.38px;
        color: rgba(166, 166, 166, 1);
        vertical-align: top;
        writing-mode: vertical-rl;
        text-orientation: upright;
        text-align: center;
      }
    }
  }

  .two-part-main {
    padding: 10px 10px 0 10px;
    position: relative;


    .two-part-title {
      display: flex;
      justify-content: flex-start;
      align-items: center;

      .time-l {
        font-size: 23px;
        font-weight: 500;
        letter-spacing: 0px;
        line-height: 33.3px;
        color: rgba(0, 0, 0, 1);
      }

      .time-r {
        font-size: 12px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 17.38px;
        color: rgba(0, 0, 0, 1);
      }

      > img {
        width: 38px;
        height: 38px;
        margin-right: 8px;
      }

      div:nth-child(1) {
        font-size: 16px;
        font-weight: 500;
        letter-spacing: 0px;
        line-height: 23.17px;
        color: rgba(0, 0, 0, 1);
      }

      div:nth-child(2) {
        font-size: 12px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 17.38px;
        color: rgba(153, 153, 153, 1);
        text-align: left;
      }
    }

    .title {
      font-size: 17px;
      font-weight: 400;
      letter-spacing: 0px;
      line-height: 24.62px;
      color: rgba(0, 0, 0, 1);
      text-align: left;
      vertical-align: top;
      padding-top: 5px;
    }

    .desc {
      font-size: 14px;
      font-weight: 400;
      letter-spacing: 0px;
      color: rgba(166, 166, 166, 1);

      display: -webkit-box;
      -webkit-line-clamp: 3; /* 设置最大行数 */
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      word-wrap: break-word; /* 允许换行 */
      line-height: 1.5; /* 行高，可根据需要进行调整 */
    }

    .image-list {
      padding: 15px 0;
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: flex-start;
      border-bottom: 0.45px solid rgba(229, 229, 229, 1);

      .item-list-item:nth-of-type(3n + 0) {
        margin-right: 0;
      }

      .item-list-item {
        width: calc((100% - 14px) / 3);
        height: 114px;
        border-radius: 5px;
        margin-right: 7px;
        position: relative;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;


        .more {
          position: absolute;
          bottom: 0;
          right: 0;
          width: 36px;
          height: 26px;
          opacity: 1;
          border-radius: 5px 0px 5px 0px;
          background: rgba(0, 0, 0, 0.47);
          font-size: 12px;
          font-weight: 400;
          letter-spacing: 0.5px;
          line-height: 26px;
          color: rgba(255, 255, 255, 1);
          text-align: center;
        }
      }
    }

    .remark {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #f0f0f0;
      padding-bottom: 10px;

      > img {
        width: 11px;
        height: 11px;
      }

      > div {
        display: flex;
        align-items: center;

        img {
          width: 15.28px;
          height: 15.28px;
          opacity: 1;
        }

        > div {
          margin-left: 4px;
          font-size: 12px;
          font-weight: 400;
          color: rgba(81, 81, 81, 1);
        }
      }
    }
  }

  .three-part-main {
    padding: 10px 10px;
    border-bottom: 1px solid #f0f0f0;

    .three-part-title {
      display: flex;
      justify-content: flex-start;
      align-items: center;

      > img {
        width: 38px;
        height: 38px;
        margin-right: 8px;
      }

      .info {
        .info-top {
          font-size: 16px;
          font-weight: 500;
          letter-spacing: 0px;
          line-height: 23.17px;
          color: rgba(0, 0, 0, 1);
        }

        .info-bottom {
          font-size: 12px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 17.38px;
          color: rgba(153, 153, 153, 1);
          text-align: left;
        }
      }

      .gzbtn {
        margin-left: auto;
        border: 1px solid #f0f0f0;
        width: 43.29px;
        height: 17.7px;
        opacity: 1;
        border-radius: 3px;
        background: rgba(204, 204, 204, 0);
        font-size: 10px;
        font-weight: 500;
        letter-spacing: 0px;
        line-height: 14.48px;
        color: rgba(0, 0, 0, 1);
        text-align: center;
      }

      .nogz {
        background: rgba(242, 150, 0, 1);
        color: #ffffff;
      }
    }

    .desc {
      font-size: 17px;
      font-weight: 400;
      letter-spacing: 0px;
      line-height: 24.62px;
      color: rgba(0, 0, 0, 1);
      text-align: left;
      vertical-align: top;
      //padding-top: 10px;
    }

    .three-artile {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 5px;
      padding-bottom: 8px;
      position: relative;

      .three-artile-left {
        width: 60%;
        height: 91px;
        font-size: 12px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 17.38px;
        color: rgba(166, 166, 166, 1);

        .left-t {
          height: 55px;
          display: -webkit-box;
          -webkit-line-clamp: 3; /* 设置最大行数 */
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
          word-wrap: break-word; /* 允许换行 */
          line-height: 1.5; /* 行高，可根据需要进行调整 */
        }

        :nth-child(1) {

          > img {
            width: 60%;
            height: 91px;
          }
        }

        :nth-child(2) {
          margin-top: 8px;
          display: flex;
          justify-content: space-between;
          align-items: center;

          img {
            width: 11px;
            height: 11px;
            opacity: 1;
          }
        }

      }

      .three-artile-right {
        background-size: 100% 100%;
        width: 122px;
        height: 91px;
        opacity: 1;
        border-radius: 5px;
      }
    }

    .three-artile-bottom {
      font-size: 12px;
      font-weight: 400;
      //letter-spacing: 0px;
      //line-height: 17.38px;
      color: rgba(166, 166, 166, 1);
      //text-align: left;
      //vertical-align: top;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }

  .four-part-main {
    padding: 10px 10px;
    border-bottom: 1px solid #f0f0f0;

    .three-part-title {
      display: flex;
      justify-content: flex-start;
      align-items: center;

      > img {
        width: 38px;
        height: 38px;
        margin-right: 8px;
      }

      .info {
        .info-top {
          font-size: 16px;
          font-weight: 500;
          letter-spacing: 0px;
          line-height: 23.17px;
          color: rgba(0, 0, 0, 1);
        }

        .info-bottom {
          font-size: 12px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 17.38px;
          color: rgba(153, 153, 153, 1);
          text-align: left;
        }
      }

      .gzbtn {
        margin-left: auto;
        border: 1px solid #f0f0f0;
        width: 43.29px;
        height: 17.7px;
        opacity: 1;
        border-radius: 3px;
        background: rgba(204, 204, 204, 0);
        font-size: 10px;
        font-weight: 500;
        letter-spacing: 0px;
        line-height: 14.48px;
        color: rgba(0, 0, 0, 1);
        text-align: center;
      }

      .nogz {
        background: rgba(242, 150, 0, 1);
        color: #ffffff;
      }
    }

    .desc {
      font-size: 17px;
      font-weight: 400;
      letter-spacing: 0px;
      line-height: 24.62px;
      color: rgba(0, 0, 0, 1);
      text-align: left;
      vertical-align: top;
      //padding-top: 10px;
    }

    .three-artile {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 5px;
      padding-bottom: 8px;
      position: relative;

      .three-artile-left {
        width: 60%;
        height: 91px;
        font-size: 12px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 17.38px;
        color: rgba(166, 166, 166, 1);

        .left-t {
          height: 55px;
          display: -webkit-box;
          -webkit-line-clamp: 3; /* 设置最大行数 */
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
          word-wrap: break-word; /* 允许换行 */
          line-height: 1.5; /* 行高，可根据需要进行调整 */
        }

        :nth-child(1) {

          > img {
            width: 60%;
            height: 91px;
          }
        }

        :nth-child(2) {
          margin-top: 8px;
          display: flex;
          justify-content: space-between;
          align-items: flex-end;

          img {
            width: 11px;
            height: 11px;
            opacity: 1;
          }
        }

      }

      .three-artile-right {
        background-size: 100% 100%;
        width: 122px;
        height: 91px;
        opacity: 1;
        border-radius: 5px;
      }
    }

    .three-artile-bottom {
      font-size: 12px;
      font-weight: 400;
      //letter-spacing: 0px;
      //line-height: 17.38px;
      color: rgba(166, 166, 166, 1);
      //text-align: left;
      //vertical-align: top;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}
</style>
